import React from 'react';
import ReactMarkdown from 'react-markdown';
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
import {vscDarkPlus, darcula} from 'react-syntax-highlighter/dist/esm/styles/prism';

interface IProps {
  textContent: string
  language?: string;
  theme?: { [key: string]: React.CSSProperties };
}

const OmsMarkdown = (props: IProps) => {

  const {textContent, theme = darcula, language = 'txt'} = props;

  return (
    <ReactMarkdown
      components={{
        code({node, inline, className, children}) {
          const match = /language-(\w+)/.exec(className || '');
          return !inline && match ? (
            <SyntaxHighlighter
              showLineNumbers={true}
              style={theme}  // 主题风格
              language={match[1]}
              PreTag='div'
            >
              {String(children).replace(/\n$/, '')}
            </SyntaxHighlighter>
          ) : (
            <code className={className}>
              {children}
            </code>
          );
        }
      }}
    >
      {textContent}
    </ReactMarkdown>
  );
}

export default OmsMarkdown
